<template>
  <div class="content">
    <div style="boxs">
      <!-- <Header :params="params" /> -->
    </div>
    <div class="body">
      <div class="tips">请添加上传文件：</div>
      <van-uploader :before-read="beforeRead" :after-read="afterRead" @delete="preDel" @click-preview="previewFile" v-model="fileList" accept="image/jpeg,image/png" max-count="8" multiple />
      <div class="button">
        <van-button type="info" :disabled="flag" @click="uploadFile">提交</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      params: {
        left: true,
        title: "文件上传",
      },
      flag: true,
      fileList: [],
      fileLists: [],
      formData: "",
      imgId: "",
      status: "",
    };
  },
  mounted() {
    this.imgId = this.$route.query.id;
    this.status = this.$route.query.status;
  },
  methods: {
    //   上传之前的校验
    beforeRead(file) {
      // 如果多选的   数组
      if (Array.isArray(file)) {
        for (var i = 0; i < file.length; i++) {
          console.log(file[i].type);
          if (file[i].type != "image/jpeg" && file[i].type != "image/png") {
            this.$toast.fail("上传图片格式有误");
            return false;
          }
          if (file[i].size / 1024 / 1024 >= 20) {
            this.$toast.fail("上传图片文件不能大于20M");
            return false;
          }
        }
        this.fileLists=file;
        console.log(this.fileLists);
        return true;
      } else {
        if (file.type !== "image/jpeg" && file.type !== "image/png") {
          this.$toast.fail("上传图片格式有误");
          return false;
        }
        if (file.size / 1024 / 1024 >= 20) {
          this.$toast.fail("上传图片文件不能大于20M");
          return false;
        }
        this.fileLists.push(file);
        console.log(this.fileLists);
        return true;
      }
    },
    // 上传成功
    afterRead() {
      if (this.fileList.length > 0) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    // 删除预览
    preDel() {
      if (this.fileList.length > 0) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    // 点击预览图片
    previewFile() {
      console.log("预览");
    },
    // 上传文件
    uploadFile() {
      this.formData = new FormData();
      for (var i = 0; i < this.fileLists.length; i++) {
        this.formData.append(`fileList[${i}].file`, this.fileLists[i]);
      }
      this.formData.append("id", this.imgId);
      // 待提交
      if (this.status == "待提交") {
        this.uploadFinalFile();
      } else if (this.status == "已驳回") {
        this.uploadFinalFile1();
      }
      // 已驳回
    },
    // 待提交
    uploadFinalFile() {
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0
      });
      (async () => {
        const data = await this.post("/approve/addBeiKeFile", this.formData);
        if (data.code == 200) {
          this.$toast.clear();
          this.$router.back();
          this.$toast.success(data.msg);
        } else {
          this.$toast.clear();
          this.$toast.fail(data.msg);
        }
      })();
    },
    // 已驳回
    uploadFinalFile1() {
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0
      });
      (async () => {
        const data = await this.post(
          "/approve/beiKeReuploadHasBeenRejected",
          this.formData
        );
        if (data.code == 200) {
          this.$toast.clear();
          this.$router.go(-2);
          this.$toast.success(data.msg);
        } else {
          this.$toast.clear();
          this.$toast.fail(data.msg);
        }
      })();
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  width: 100%;
}
.content {
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
  .body {
    width: 100%;
    height: 100%;
    background-color: #fff;
    font-size: 0.1rem;
    padding: 0.3rem 0.24rem 0;
    box-sizing: border-box;
    position: relative;
    .tips {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-bottom: 0.24rem;
    }
    .button {
      position: absolute;
      left: 0.24rem;
      bottom: 0.24rem;
      .van-button {
        width: 7.02rem;
        height: 0.84rem;
      }
    }
  }
}
</style>